<template>
  <div>
    <a-button-group>
      <a-button type="primary" @click="showModal">
        新建
      </a-button>
      <a-button type="default" @click="editMenu">
        编辑
      </a-button>
    </a-button-group>
    <br/>
    <br/>

    <a-table :columns="columns"
             :loading="loading"
             :data-source="tableData"
             :pagination="pagination"
             :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
             rowKey="id">

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status === 1 ? 'green' : 'red'">
            {{ record.status === 1 ? '启用' : '禁用' }}
          </a-tag>
        </template>
      </template>
    </a-table>

    <a-modal v-model:visible="visible" title="新建" @ok="handleOk">
      <template>
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="saveLoading" @click="handleOk">
          保存
        </a-button>
      </template>
      <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="邮箱">
          <a-input v-model:value="form.email" :disabled="disabled"/>
        </a-form-item>
        <a-form-item label="用户名">
          <a-input v-model:value="form.username" :disabled="disabled"/>
        </a-form-item>
        <a-form-item label="昵称">
          <a-input v-model:value="form.nickname"/>
        </a-form-item>
        <a-form-item label="状态">
          <a-switch v-model:checked="statusCheck" @change="onChange"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import {UserApi} from "@/components/home/pms/user/js/UserApi";

const columns = [
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email'
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username'
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname'
  },
  {
    title: '注册时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    this.selectedRowKeys = selectedRowKeys;
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
  data() {
    return {
      tableData: [],
      columns,
      rowSelection,
      selectedRowKeys: [],
      expandedRowKeys: [],
      loading: false,
      visible: false,
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      saveLoading: false,
      disabled: false,
      form: {
        id: '',
        email: '',
        username: undefined,
        nickname: undefined,
        status: 1
      },
      pagination: {
        current: 1,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },
    };
  },
  computed: {
    statusCheck(){
      return this.form.status === 1;
    }
  },
  created() {
    this.loadTableData();
  },
  methods: {
    onChange(checked) {
      this.form.status = checked ? 1 : 0;
    },
    loadTableData() {
      this.loading = true;
      this.findPage({page: this.pagination.current, size: this.pagination.pageSize}).then(data => {
        this.tableData = data.list;
        this.loading = false;
      });
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 清楚children属性
     * @param arr
     */
    cleanChildren(arr) {
      for (let i in arr) {
        const item = arr[i];
        if (item.children.length === 0) {
          delete item.children;
        } else {
          this.cleanChildren(item.children)
        }
      }
    },
    deleteMenu() {
      this.delete({data: this.selectedRowKeys}).then(() => {
        this.$message.success("已删除");
        this.loadMenuTable();
      }, message => {
        this.$message.warning(message);
      })

    },
    isSelectOne() {
      if (this.selectedRowKeys && this.selectedRowKeys.length === 1) {
        return true;
      }
      return false;
    },
    editMenu() {
      if (!this.isSelectOne()) {
        this.$message.warning('请选择并且只能选择一条数据');
        return;
      }
      this.get(this.selectedRowKeys[0]).then(res => {
        this.form = res;
        this.disabled = true;
        this.showModal()
      });
    },
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.loading = true;
      this.updateInfo(this.form).then(() => {
        this.visible = false;
        this.loading = false;
        this.loadTableData();
      })
    }
    ,
    handleCancel() {
      this.visible = false;
    }
    ,
    onSubmit() {
      console.log('submit!', this.form);
    }
    ,
    showConfirm() {
      const that = this;
      if (!that.isSelectOne()) {
        that.$message.warning('请选择并且只能选择一条数据');
        return;
      }
      this.$confirm({
        title: '确定删除吗?',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.deleteMenu();
        },
        onCancel() {
        },
      });
    }
    ,
  },
  mixins: [UserApi],
};
</script>
